<template>
  <div>
    <!--
          必填:
            action: 指定上传地址, 后面用腾讯云服务, 给个# 敷衍下
            file-list: 必备数组管理图片, 其中每个对象是一张图片, url属性  决定显示图片地址

          样式:
            list-type: 影响渲染样式, 指定picture-card  照片墙
            class: 动态类名, 根据文件列表的长度决定上传组件显示与否

          钩子:
            on-preview: 图片被点击时的处理方式, 绑定了就会出现放大镜, 需要自己显示弹窗
            on-remove: 点击删除触发
            on-change: 修改文件列表时的钩子, 文件状态 (添加,上传成功,上传失败) 改变就会被触发

          上传相关:
            before-upload: 上传前的校验, 如果返回false会阻止上传
            http-request: 替换action的默认上传行为
       -->
    <el-upload
      action="#"
      list-type="picture-card"

      :file-list="fileList"
      :class="{hasImg: fileList.length>0}"
      :on-preview="onPreview"
      :on-remove="onRemove"
      :on-change="onChange"

      :before-upload="beforeUpload"
      :http-request="httpRequest"
    >
      <i class="el-icon-plus" />
    </el-upload>

    <!-- 进度条 -->
    <el-progress
      v-if="isShowProgress"
      :text-inside="true"
      :stroke-width="18"
      :percentage="percent"
      status="success"
      style="width: 150px"
    />

    <!-- 预览弹窗 -->
    <el-dialog
      title="预览"
      :visible="isShowDialog"
      @close="btnCancel"
    >
      <el-row type="flex" justify="center">
        <img :src="previewImgFile" alt="">
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
const COS = require('cos-js-sdk-v5')
const cos = new COS({
  SecretId: 'AKIDypY4PYZSAgy1pOrEbqqcEtXBjy2tY4PW',
  SecretKey: 'ueWK6gCcolUzGI4awPgKn21jDSVN2eHw'
})
export default {
  data() {
    return {
      isShowProgress: false,
      percent: 0, // 上传加载进度条
      isShowDialog: false, //  是否显示弹窗
      previewImgFile: '', // 预览图片地址
      fileList: [
        //   文件列表每个对象都是一张图片, 最重要的是url属性
        // 其实上传组件会自动添加其他必备属性, 如: uid 唯一标识, status: 状态

      ]
    }
  },
  methods: {
    //   单击放大镜, 触发的钩子函数
    onPreview(file) {
      console.log(file)
      this.previewImgFile = file.url
      //   弹窗
      this.isShowDialog = true
    },
    btnCancel() {
      // 关闭弹窗
      this.isShowDialog = false
    },

    // 点击删除触发的钩子函数
    // 由于图片数据是单向绑定的, 不会删除fileList中的数据, 所以需要手动删除
    onRemove(file, newFileList) {
      this.fileList = newFileList
    },

    // 文件状态改变触发的钩子
    //  由于图片数据是单向绑定的, 图片上传之后, 不会直接存入fileList, 需要自己手动加入
    onChange(file, newFileList) {
      this.fileList = newFileList
    },
    // 文件上传前
    beforeUpload(file) {
      console.log('上传前')
      console.log(file)

      //   检测格式
      const typeList = ['image/jpeg', 'image/png', 'image/gif']
      if (!typeList.includes(file.type)) {
        //   图片格式不在白名单中
        this.$message.error('图片格式仅支持 jpeg / png / gif ')
        return false
      }

      //   检测大小
      const maxSize = 1024 * 1024 * 10
      if (file.size > maxSize) {
        this.$message.error('图片大小不能超过 1M ')
        return false
      }
    },

    //
    httpRequest(params) {
      console.log('正在上传')
      console.log(params)
      // 显示上传进度条
      this.isShowProgress = true
      cos.putObject({
        Bucket: 'hr-1309637769', /* 必须 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: params.file.name, /* 必须 */
        StorageClass: 'STANDARD',
        Body: params.file, // 上传文件对象
        onProgress: (progressData) => { //  需要用箭头函数, 改变this指向
          // 文件上传进度回调
          console.log(JSON.stringify(progressData))
          // 进度条
          this.percent = progressData.percent * 100
        }

      }, (err, data) => { //  需要用箭头函数, 改变this指向, 不然会报找不到fileList这个属性
        // 腾讯云上传成功回调函数
        console.log('腾讯云上传成功回调函数')
        console.log(err || data)

        setTimeout(() => {
          // 关闭进度条
          this.isShowProgress = false
        }, 1000)
        if (!err) {
          // 手动处理fileList
          // 将从腾讯云返回的地址, 赋值给本地的url
          this.fileList[0].url = 'http://' + data.Location
          // 因为饿了么组件一开始的上传路径是通过action来控制, 只要有url, 只有自动生成uid和status
          // 现在已经用http-request替代, 饿了么不知道什么时候上传完, 所以 不会改states的状态, 所以需要手动修改
          this.fileList[0].status = 'success'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 控制上传组件显示与否的类名
.hasImg {
    ::v-deep .el-upload--picture-card {
        display: none;
    }
}

::v-deep img {
  object-fit: cover;
}
::v-deep .el-row--flex{
    // width:100%;
    width: 750px;
    img{
        width: 100%;
    }
}
</style>
